<template>
  <div id="app">
    <heads></heads>
    <el-container>
      <el-header>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="首页" name="/home" ></el-tab-pane>
          <el-tab-pane label="全部商品" name="/allshop"></el-tab-pane>
          <el-tab-pane label="关于我们" name="about"></el-tab-pane>
        </el-tabs>
        <el-input
          size="medium"
          placeholder="请输入内容"
          suffix-icon="el-icon-date"
        >
        </el-input>
      </el-header>
      <router-view />
    </el-container>
   
  </div>
</template>
<script>
import heads from "@/components/heads.vue";
export default {
  data() {
    return {
      activeName: "/home",
    };
  },
  components: {
    heads,
  },
  watch:{
  $route(to,from){
    // console.log(to,from);
    this.activeName=to.fullPath
  }
  },
  methods: {
    handleClick(tab) {
      this.$router.push(tab.name)
    },
  },
};
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.el-header{
  width: 1400px;
  padding: 0 !important;
  margin: 0 auto;
  display: flex;
  // justify-content: space-around;
  .el-input{
    width: 30%;
    margin-left: 50px;
    margin-top: 9px;
  }
  .el-tabs{
   width: 60%;
     margin-top: 9px;
  }
}
#app,body,html{
  width: 100%;
  height: 100%;
  user-select: none;
}
*{
  margin: 0;
  padding: 0;
  ul,ol{
    list-style: none;
  }
}
</style>
